<script setup>
import {bedApi} from "@/api/bed/bed.js";
import {onMounted, ref} from "vue";
// 定义变量

const bedArr=ref([

])


onMounted(()=>{
    bedLoad()
})



const bedLoad=()=>{
  bedApi().then((reponse)=>{
    bedArr.value=reponse
    console.log(bedArr.value)
    console.log(bedArr.value[0].roomId)
  })
}

</script>

<template>
  <div style="background-color: #fff">
    <div style="display: flex;justify-content: end">
      <el-button type="success">新增楼层</el-button>
      <el-button type="success">新增房间</el-button>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="一楼">
        <el-row>
          <el-col :span="7" class="floor" v-for="item in bedArr">
            <div style="height: 205px;box-sizing: border-box">
              <el-row>

                <el-col :span="10" style="padding: 20px">
                  <div style="margin-bottom: 5px">房间号:{{item.roomId}}</div>
                  <div>房间类型:四人间</div>
                </el-col>

                <el-col :span="14" style="padding: 20px 0">
                  <el-link href="https://element-plus.org" target="_blank" class="my_right">删除</el-link>
                  <el-link href="https://element-plus.org" type="primary" class="my_right" target="_blank">编辑
                  </el-link>
                  <el-link href="https://element-plus.org" type="primary" class="my_right" target="_blank">查看
                  </el-link>
                  <el-link href="https://element-plus.org" type="primary" target="_blank">
                    <el-button type="primary">新增床位</el-button>
                  </el-link>
                </el-col>
              </el-row>

              <el-row>
                <el-col style="padding: 20px 20px;font-size: 12px;height: 50px" v-for="item in 4" :span="11">
                  <div>床位号:{{item.id}}</div>
                  <div>老人姓名:张三</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="二楼">
        <el-row>
          <el-col :span="7" class="floor" v-for="item in 9">
            <div style="height: 200px;box-sizing: border-box">
              <el-row>

                <el-col :span="10" style="padding: 20px">
                  <div style="margin-bottom: 5px">房间号:101</div>
                  <div>房间类型:四人间</div>
                </el-col>

                <el-col :span="14" style="padding: 20px 0">
                  <el-link href="https://element-plus.org" target="_blank" class="my_right">删除</el-link>
                  <el-link href="https://element-plus.org" type="primary" class="my_right" target="_blank">编辑
                  </el-link>
                  <el-link href="https://element-plus.org" type="primary" class="my_right" target="_blank">查看
                  </el-link>
                  <el-link href="https://element-plus.org" type="primary" target="_blank">
                    <el-button type="primary">新增床位</el-button>
                  </el-link>
                </el-col>
              </el-row>

              <el-row>
                <el-col style="padding: 20px 20px;font-size: 12px;height: 50px" v-for="item in 4" :span="11">
                  <div>床位号:1011</div>
                  <div>老人姓名:安兴</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="三楼">
        <el-row>
          <el-col :span="7" class="floor" v-for="item in 9">
            <div style="height: 200px;box-sizing: border-box">
              <el-row>

                <el-col :span="10" style="padding: 20px">
                  <div style="margin-bottom: 5px">房间号:101</div>
                  <div>房间类型:四人间</div>
                </el-col>

                <el-col :span="14" style="padding: 20px 0">
                  <el-link href="https://element-plus.org" target="_blank" class="my_right">删除</el-link>
                  <el-link href="https://element-plus.org" type="primary" class="my_right" target="_blank">编辑
                  </el-link>
                  <el-link href="https://element-plus.org" type="primary" class="my_right" target="_blank">查看
                  </el-link>
                  <el-link href="https://element-plus.org" type="primary" target="_blank">
                    <el-button type="primary">新增床位</el-button>
                  </el-link>
                </el-col>
              </el-row>

              <el-row>
                <el-col style="padding: 20px 20px;font-size: 12px;height: 50px" v-for="item in 4" :span="11">
                  <div>床位号:1011</div>
                  <div>老人姓名:安兴</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.floor {
  background-color: #f2f2f2;
  margin: 20px 20px;
}

.my_right {
  margin-right: 8px;
}
</style>